// 自定义侧边导航
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { history, useLocation } from '@umijs/max';
import { Menu } from 'antd';
import classNames from 'classnames';
import { useEffect, useState, type FC } from 'react';
import styles from './index.less';

interface SideMenuProps {
  menuData?: any[];
}

const SideMenu: FC<SideMenuProps> = (props) => {
  const { menuData } = props;
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  const [selectedKey, setSelectedKey] = useState<string>(location.pathname);
  const handleMenuClick = (val: any) => {
    const { key } = val;
    // 菜单点击自己不跳转
    if (location.pathname !== key) {
      history.push(key);
    }
  };
  useEffect(() => {
    setSelectedKey(location.pathname);
  }, [location]);
  return (
    <div
      className={classNames([
        styles.sideMenu_wrap,
        {
          [styles.sideMenu_wrap_collapsed]: collapsed,
        },
      ])}
    >
      <div
        className={classNames([
          styles.collapsed_wrap,
          {
            [styles.collapsed_wrap_collapsed]: collapsed,
          },
        ])}
        onClick={() => setCollapsed((preState) => !preState)}
      >
        {collapsed ? <RightOutlined /> : <LeftOutlined />}
      </div>
      <Menu
        className={classNames([
          styles.my_menu,
          {
            [styles.my_menu_collapsed]: collapsed,
          },
        ])}
        mode="inline"
        inlineCollapsed={collapsed}
        selectedKeys={[selectedKey]}
        onClick={handleMenuClick}
        items={menuData?.map((i) => ({ ...i, label: i.name }))}
      />
    </div>
  );
};

export default SideMenu;
